<template>
  <a-card :bordered="false">
    <a-tabs
      v-model="activeKey"
      @change="handleTabsChange"
    >
      <a-tab-pane key="1">
        <span slot="tab">
          <a-icon type="bars" />
          最优设备代价模型列表
        </span>
        <div class="table-page-search-wrapper">
          <a-form-model
            ref="formModel"
            :model="form"
            layout="inline"
            :rules="{
              name: [
                {
                  validator: validators.noWhitespace(),
                  trigger: 'change',
                },
                {
                  validator: validators.noIllegalString(),
                  trigger: 'change',
                },
                {
                  max: 10,
                  message: '长度在 1 到 10 个字符',
                  trigger: 'change',
                },
              ],
            }"
          >
            <a-row
              :gutter="[16, 16]"
              type="flex"
              justify="end"
            >
              <a-col
                :md="6"
                :sm="8"
              >
                <a-form-model-item
                  prop="name"
                  label="数据中心"
                >
                  <a-input
                    autocomplete="off"
                    v-model="form.name"
                  />
                </a-form-model-item>
              </a-col>
              <!-- <a-col :md="6" :sm="8">
                <a-form-model-item label="数据中心">
                  <a-select
                    :getPopupContainer="
                    triggerNode => {
                      return triggerNode.parentNode || document.body;
                    }"
                    v-model="form.datacenterId">
                    <a-select-option
                      v-for="d in datacenterList"
                      :key="d.id"
                      :value="d.id"
                    >
                      {{ d.name }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col> -->
              <span
                style="float: left; overflow: hidden"
                class="table-page-search-submitButtons"
              >
                <a-col
                  :md="12"
                  :sm="24"
                >
                  <a-button
                    type="primary"
                    @click="loadData(true)"
                    icon="search"
                  >
                    查询
                  </a-button>
                  <a-button
                    @click="resetSearchForm"
                    icon="reload"
                    style="margin-left: 8px"
                  >
                    重置
                  </a-button>
                </a-col>
              </span>
            </a-row>
          </a-form-model>
        </div>

        <a-table
          ref="table"
          rowKey="id"
          size="middle"
          :columns="columns"
          :dataSource="gDataSource"
          :pagination="gPagination"
          @change="gHandleTableChange"
        >
          <span
            slot="sortCol"
            slot-scope="text, record, index"
          >
            {{
              (gPagination.current - 1) * gPagination.pageSize +
              parseInt(index) +
              1
            }}
          </span>
            <span
              slot="scoreProgress"
              slot-scope="text"
            >
              <a-progress
                status="active"
                :percent="text"
                :format="percent => `${percent}`"
                :stroke-color="text < 60 ? '#b93b04' : text < 80 ? '#ffb400' : '#089b04'"
              />
            </span>
            <span
              slot="action"
              slot-scope="text, record"
            >
              <a-button
                type="primary"
                icon="profile"
                size="small"
                @click="handleDetail(record)"
              >查看评分</a-button>
              <!-- <a-divider type="vertical" />
        <a @click="handleDetail(record)">详情</a> -->
            </span>
        </a-table>
        <detail-modal
          ref="detailModal"
          @ok="loadData"
        ></detail-modal>
      </a-tab-pane>

      <a-tab-pane key="2">
        <span slot="tab">
          <a-icon type="tool" />
          最优设备代价模型设置
        </span>
        <edit-model-factors
          v-if="activeKey === '2'"
          :isShowBestPredictBtn="true"
          modelType="DATACENTER_DEVICE"
          module="精确管控与供电制冷联动-统一管理联动平台-最优设备代价模型-最优设备代价模型设置"
          content="最优设备代价模型设置"
          @ok="loadData"
        />
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script>
  import { GwListMixin } from "@/mixins/GwListMixin";
  import { gPostAction } from "@/api/manage";
  import DetailModal from "./modules/DetailModal";
  import EditModelFactors from "@comp/gw/EditModelFactors";

  export default {
    name: "F010402",
    mixins: [GwListMixin],
    components: {
      DetailModal,
      EditModelFactors,
    },
    data() {
      return {
        // 表头
        columns: [
          {
            title: "序号",
            dataIndex: "",
            key: "rowIndex",
            width: 50,
            scopedSlots: { customRender: "sortCol" },
          },
          {
            title: "数据中心",
            dataIndex: "name",
          },
          // {
          //   title: "数据中心",
          //   dataIndex: "datacenterName",
          // },
          {
            title: "最优设备评分",
            dataIndex: "totalScore",
            scopedSlots: { customRender: "scoreProgress" },
          },
          {
            title: "操作",
            width: 100,
            dataIndex: "action",
            scopedSlots: { customRender: "action" },
          },
        ],
        datacenterList: [],
        url: {
          list: "/model/pageModelScore",
          datacenterList: "/asset/pageDatacenter",
        },
        form: {
          datacenterId: "",
          name: "",
        },
        activeKey: "1",
      };
    },
    mounted() {
      this.loadDatacenter();
      this.loadData();
    },
    methods: {
      loadData(isDoSearch) {
        this.$refs.formModel.validate((error) => {
          if (!error) {
            return;
          }
          this.gQueryParam.deviceName = this.form.name;
          this.gQueryParam.datacenterId = "";
          this.gQueryParam.title = "精确管控与供电制冷联动-统一管理联动平台-最优设备代价模型";
          this.gQueryParam.content = "查询最优设备代价模型列表";
          if (this.form.datacenterId) {
            this.gQueryParam.datacenterId = this.form.datacenterId;
          }
          this.gQueryParam.modelType = "DATACENTER_DEVICE";
          if (isDoSearch) {
            this.gQueryParam.pageNo = 1;
            this.gPagination.current = 1;
          }
          gPostAction(this.url.list, this.gQueryParam).then((res) => {
            const data = res.data;
            if (data && data.list) {
              this.gDataSource = data.list;
              this.gPagination.total = data.totalCount;
            }
          });
        });
      },
      loadDatacenter() {
        gPostAction(this.url.datacenterList, {}).then((res) => {
          const data = res.data;
          if (data && data.list) {
            this.datacenterList = data.list;
            this.datacenterList.unshift({ id: '', name: '全部' });
          }
        });
      },
      handleDetail(data) {
        this.$refs.detailModal.showModal(data);
      },
      resetSearchForm() {
        this.form.name = "";
        this.form.datacenterId = "";
        this.$refs.formModel.resetFields();
      },
      handleTabsChange(e) {
        if (e === "1") {
          this.resetSearchForm();
          this.loadData();
        }
      },
    },
  };
</script>